<template>
    <div style="padding: 20px">
        <!--<h6>-->
            <p>组件使用示例</p>
            <pre>
                < page
                        :currentPage="currentPage"
                        :itemTotal="itemTotal"
                        :pageSize="pageSize"
                        @pageChange="pageChange"
                >
                < /page>
            </pre>
            <p>分页组件 传入参数说明：</p>
            <p>currentPage:当前页，number类型</p>
            <p>itemTotal:条目总数，number类型</p>
            <p>pageSize: 单页显示条数,number类型</p>
            <p>pageChange(val) ,翻页回调函数，参数为选中跳转页</p>

        <!--</h6>-->
     <div style="margin: 20px 0;">
    <h4>分页组件测试</h4>
    <p>当前页：<input v-model.number="currentPage" type="number"></p>
    <p>总数：<input v-model.number="itemTotal" type="number"></p>
    <p>每页显示个数：<input v-model.number="pageSize" type="number"></p>
         <div style="margin: 20px 0;">
    <page
            :currentPage="currentPage"
            :itemTotal="itemTotal"
            :pageSize="pageSize"
            @pageChange="pageChange"
    >
    </page>
         </div>
     </div>
    </div>
</template>

<script>
    module.exports = {
        name:'pagetest',
        data:function () {
            return{
                currentPage:1,
                itemTotal:10000,
                pageSize:100
            }
        },
        methods:{
            pageChange:function (val) {
                this.currentPage = val;
//                alert('pageChange!')
            }
        },
        components:{
            page:require('../component/page.vue')
        }
    }
</script>

<style>
</style>